<template>
    <div class="container">
        <div class="dispatch-order-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link to="/check/sentOrder">已派订单/</router-link>
                {{detail.orderId}}
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="detail-content">
                <div class="head flex-box-align" style="font-size: 14px" @click="handleClickHead">
                    <div class="flex flex-box-align left-sec">
                        <div v-if="detail" class="whiteSpace">订单号：{{detail.orderId}}</div>
                        <div v-if="detail" class="whiteSpace">融资企业：{{detail.masterOrder ? detail.masterOrder.coreData.companyName : '--'}}</div>
                        <div v-if="detail" class="whiteSpace">贷款产品：{{detail.masterOrder.productData.productName}}</div>
                        <div v-if="detail" class="whiteSpace">融资顾问：{{detail.masterOrder.adviserName}}</div>
                        <div v-if="detail.masterOrder.bankServiceManagerName" class="whiteSpace">业务经理：{{detail.masterOrder.bankServiceManagerName}}</div>
                    </div>
                    <div style="width: 22px; height: 12px" class="arrow-down" v-if="show == false">
                    </div>
                    <div style="width: 22px; height: 12px" class="arrow-top" v-else>
                    </div>
                </div>
                <div v-if="show">
                    <div class="info-wrap">
                        <div class="infos-list">
                            <div class="info-list">
                                <div class="info">贷款产品：<span class="name">{{detail.masterOrder.productData.productName}}</span></div>
                                <div class="info">
                                    <div class="info-item">
                                        贷款额度：<span>{{detail.masterOrder.productData.loanFundMin}}万 ~ {{detail.masterOrder.productData.loanFundMax}}万</span>
                                    </div>
                                    <!--<div class="info-item">-->
                                        <!--总投资金额：<span>{{detail.masterOrder.productData.totalInvestFund + '万'}}</span>-->
                                    <!--</div>-->
                                    <div class="info-item">
                                        贷款适用地区：<span>{{area.join(';')}}</span>
                                    </div>
                                    <div class="info-item">
                                        申请者最低成立年限：<span>{{detail.masterOrder.productData.applyMixYear + '年'}}</span>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="info-item">
                                        贷款年化利率：<span>{{detail.masterOrder.productData.minReportRate + '%/年'}}</span>
                                    </div>
                                    <div class="info-item">
                                        贷款最高期限：<span>{{detail.masterOrder.productData.investYearDesc}}</span>
                                    </div>
                                    <!-- <div class="info-item">
                                        申请者最低成立年限：<span>{{detail.masterOrder.productData.applyMixYear + '年'}}</span>
                                    </div> -->
                                    <div class="info-item">
                                        申请者最低营业收入要求：<span>{{detail.masterOrder.productData.applyMixIncome}}</span>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="info-item">
                                        资金主体：<span>{{detail.masterOrder.productData && detail.masterOrder.productData.fundBodyDatas ? detail.masterOrder.productData.fundBodyDatas.map(item => item.fundBodyDesc).join(',') || '暂无' : '暂无'}}</span>
                                    </div>
                                    <!-- <div class="info-item">
                                        投资方式：<span>{{detail.masterOrder.productData.investTypeDesc}}</span>
                                    </div> -->
                                    <div class="info-item">
                                        申请者盈利要求：<span v-if="detail.masterOrder.productData.applyProfit == 'y'">需盈利</span>
                                        <span v-else>无要求</span>
                                    </div>
                                    
                                </div>
                                <div class="info">
                                    <!-- <div class="info-item">
                                        投资行业：<span>{{detail.masterOrder.productData.thirdIndustryDesc || '--'}}</span>
                                    </div>
                                    <div class="info-item">
                                        投资公司融资阶段：<span>{{detail.masterOrder.productData.financeLevelDesc}}</span>
                                    </div> -->
                                    <!-- <div class="info-item">
                                        申请者最低营业收入要求：<span>{{detail.masterOrder.productData.applyMixIncome + '万'}}</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom: 25px;margin-top: 25px;" v-if="stepName">当前阶段：<span style="color: #ED7018">{{stepName}}</span></div>
                <div class="step-wrap">
                    <el-steps :active="active" finish-status="success" align-center>
                        <el-step :title="item.stepName" v-for="(item, index) in stepList" :key="index"></el-step>
                    </el-steps>
                </div>

                <div class="last-comment" v-if="detail.lastCommentDatas && detail.lastCommentDatas.length" style="padding: 20px;background-color: #f8f8f8;margin-top: 20px;">
                    <div class="flex-cont">
                        <div class="flex" style="text-align: center" v-for="(item, index) in detail.lastCommentDatas" :key="index">
                            <span>{{item.name}}：</span>
                            <span>{{item.value}}</span>
                        </div>
                    </div>
                </div>

                <!--v-if="detail.stepKey == 'loan_init'"-->
                <div class="info-get" v-if="detail.stepKey != 'dispatch' && stepKey">
                    <div style="padding: 20px 0" v-if="!isToggle">
                        {{stepName}}：<el-button  type="primary" style="background-color: #ED7018;border-color: #ED7018" @click="handleClickAddQuestion">添加问题</el-button>
                    </div>

                    <ul class="question-list">
                        <li class="question-item" v-for="(item, index) in detail.questionDatas" :key="index">
                            <div class="flex-box-align" style="margin-bottom: 20px;">
                                <span style="margin-right: 10px;">序号{{index+1}}</span>
                                <el-button @click="handleClickEditQuestion(item)" type="primary" style="background-color: #ED7018;border-color: #ED7018">编辑</el-button>
                                <el-button @click="handleClickDelete(item)">删除</el-button>
                            </div>
                            <div class="flex-box-justify" style="margin-bottom: 20px;">
                                <span class="flex">{{item.creatorName}}在阶段【{{detail.stepName || detail.lastStepName}}】中创建</span>
                                <span class="flex">类型：{{item.questionTypeDesc}}{{item.questionSubTypeDesc}}</span>
                                <span class="flex">{{item.gmtCreated}}</span>
                            </div>
                            <div style="font-size: 16px;margin-bottom: 20px;">{{item.questionContent}}</div>
                            <div class="flex-box-align" style="margin-bottom: 20px;color: #666;" v-if="!isToggle">
                                回复及附件：
                                <el-upload
                                    class="upload-demo"
                                    :action="uploadUrl"
                                    :on-change="handleChange"
                                    :file-list="fileList"
                                    :on-success="handleSuccessFile.bind(null, {
                                        questionId: item.id,
                                        orderId: item.orderId,
                                        stepKey: item.stepKey,
                                    })">
                                    <a style="color: #000;font-weight: bold;cursor: pointer">添加附件</a>
                                </el-upload>
                            </div>
                            <div v-if="!isToggle">
                                <el-input
                                        type="textarea"
                                        :rows="4"
                                        placeholder="请输入内容"
                                        v-model="commitAnswerParams[index].answer" style="margin-bottom: 20px;">
                                </el-input>
                                <div>
                                    <el-button  type="primary" style="background-color: #ED7018;border-color: #ED7018" @click="handleClickCommitAnswer(index, item.id, item.stepKey, item.answerUserType)">提交回复</el-button>
                                </div>
                            </div>
                            <div class="file-list-section" v-if="item.answerDatas && item.answerDatas.length" style="margin-top: 20px;">
                                <ul>
                                    <li v-for="(item1, index1) in item.answerDatas" v-if="item1.attachmentId" :key="index1">
                                        附件：
                                        <a style="color: #000;font-weight: bold;" target="_blank" :href="item1.attachmentFile.fileUrl">{{item1.attachmentFile.fileName}}</a>
                                        <span>{{item1.answerName}}</span>
                                        <span>{{item1.gmtCreated}}</span>
                                        <a @click="handleClickAttachment(item1.id, item1.orderId)">归档</a>
                                    </li>
                                </ul>
                            </div>


                            <div v-if="item.answerDatas && item.answerDatas.length">
                                <div style="margin: 20px 0;">回复：</div>
                                <ul class="answer-list">
                                    <li v-for="(item1, index1) in item.answerDatas" :key="index1" v-if="!item1.attachmentId">
                                        <div class="flex-box-align" style="margin-bottom: 20px;">
                                            <span style="margin-right: 20px;">{{item.creatorName}}</span>
                                            <span>{{item1.gmtCreated}}</span>
                                        </div>
                                        <div style="font-weight: bold;">{{item1.answer}}</div>
                                    </li>
                                </ul>
                            </div>

                        </li>
                    </ul>


                </div>
                <div class="dispatch-modal" v-else>
                    <el-dialog
                            title="派单"
                            :visible.sync="dialogDispatchVisible"
                            width="30%"
                    >
                        <div class="whiteSpace mb30">
                            <span>资方：</span>
                            <el-cascader
                                    :options="bankList"
                                    v-model="selectedBankOptions"
                                    :props="propsBank"
                                    @change="handleChangeBankTree">
                            </el-cascader>
                        </div>
                        <div class="whiteSpace mb30">
                            <span>客户经理：</span>
                            <el-select filterable v-model="dispatchParams.bankServiceManager" placeholder="请选择" style="width: 60%">
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.userId"
                                        :label="item.roleName"
                                        :value="item.userId">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="text-align: center">
                            <el-button @click="dialogDispatchVisible = false">取 消</el-button>
                            <el-button type="primary" @click="handleCommitDispatch" style="background: #ED7018;border-color: #ED7018">确 认</el-button>
                        </div>
                    </el-dialog>
                    <!--<div style="padding: 20px 0;">-->
                        <!--{{stepName}}及相关记录：-->
                        <!--<el-button  type="primary" style="background-color: #ED7018;border-color: #ED7018" @click="handleClickAddDispatch">新增派单</el-button>-->
                    <!--</div>-->
                </div>
                <div class="status-change-modal" style="margin-top: 20px;" v-if="stepKey && !isToggle && detail.stepKey != 'step_close' && detail.stepKey != 'step_reject'">
                    <div style="margin-bottom: 20px;">流转：</div>
                    <div class="flex-box-align" style="margin-bottom: 20px;position: relative;">
                        <span style="margin-right: 20px;">*流转</span>
                        <el-radio v-model="commentStatusParams.status" :label="item.key" v-for="(item, index) in radio.stepList" :key="index" @change="handleChangeRadio">
                            {{item.name}}
                        </el-radio>
                    </div>
                    <div v-if="items && items.length && showSubRadio1" class="radio-child" style="margin-bottom: 20px;">
                        <div class="flex-box-align" style="background-color: #f5f5f5;padding: 10px 20px">
                            <div v-for="(item1, index1) in items" :key="index1" class="flex-box-align">
                                <div  v-if="item1.type =='input'" style="margin-right: 15px;">
                                    <span>{{item1.name}}： </span>
                                    <el-input v-model="itemsParams[item1.key]" placeholder="请输入内容" style="width: 60%"></el-input>
                                </div>
                                <div  v-if="item1.type =='date'" style="margin-right: 15px;">
                                    <span>{{item1.name}}</span>
                                    <el-date-picker
                                            v-model="diligenceTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            @change="handleChangeItemsDate"
                                    >
                                    </el-date-picker>
                                </div>
                                <div class="flex-box-align" v-if="item1.type =='address'" style="margin-right: 15px;">
                                    <span>{{item1.name}}： </span>
                                    <v-distpicker :province="addressParams.province" :city="addressParams.city" :area="addressParams.district"
                                                  @province="selectProvince"
                                                  @city="selectCity"
                                                  @area="selectArea"
                                    ></v-distpicker>
                                    <el-input v-model="addressParams.address" @change="handleChangeAddress" placeholder="请输入内容" style="width:150px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-box-align" style="margin-bottom: 20px;position: relative;">
                        <span style="margin-right: 20px;" v-if="radio.stockList && radio.stockList.length">期权相关</span>
                        <el-radio v-model="stockParams.hasStock" :label="item.key" v-for="(item, index) in radio.stockList" :key="index" @change="handleChangeStockRadio">
                            {{item.name}}
                        </el-radio>
                    </div>
                    <div v-if="itemsStock && itemsStock.length && showSubRadio2" class="radio-child" style="margin-bottom: 20px;">
                        <div class="flex-box-align" style="background-color: #f5f5f5;padding: 10px 20px">
                            <!--<div v-for="(item1, index1) in itemsStock" :key="index1" v-if="item1.type =='input' || item1.type =='date'">-->
                                <!--<span>{{item1.name}}： </span>-->
                                <!--<el-input v-model="itemsStockParams[item1.key]" placeholder="请输入内容" style="width: 60%"></el-input>-->
                            <!--</div>-->
                            <div v-for="(item1, index1) in itemsStock" :key="index1" class="flex-box-align">
                                <div  v-if="item1.type =='input'" style="margin-right: 15px;">
                                    <span>{{item1.name}}： </span>
                                    <el-input v-model="itemsStockParams[item1.key]" placeholder="请输入内容" style="width: 60%"></el-input>
                                </div>
                                <div  v-if="item1.type =='date'" style="margin-right: 15px;">
                                    <span>{{item1.name}}： </span>
                                    <el-date-picker
                                            v-model="expiredTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            @change="handleChangeItemsStockDate"
                                    >
                                    </el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <span style="float: left;">备注：</span>
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="commentStatusParams.memo" style="margin-bottom: 20px;">
                        </el-input>
                    </div>
                    <div style="text-align: center">
                        <el-button  type="primary" style="background-color: #ED7018;border-color: #ED7018" @click="handleClickCommitCommentStatus">提交</el-button>
                    </div>
                </div>
                <!--<div class="" v-if="detail.stepKey == 'dispatch'">-->
                    <!--<table-list ref="tableList" :tableConfig='configList'>-->
                        <!--<el-table-column  slot=""  align="center" label="">-->
                            <!--<template slot-scope="scope">-->
                                <!--<span></span>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <!--<el-table-column class="btn" label="操作" slot="btn" align="center" >-->
                            <!--<template slot-scope="scope">-->
                                <!--<el-button  type="primary" size="small" @click="handleClickWith(scope.row.orderId)" style="background: #ED7018;border-color: #ED7018">跟进</el-button>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                    <!--</table-list>-->
                <!--</div>-->
            </div>



            <el-dialog
                    custom-class="branchDialog"
                    title="添加问题"
                    :visible.sync="dialogVisible"
                    width="30%">
                <div class="whiteSpace mb30">
                    <span>问题类型：</span>
                    <el-cascader
                            :options="questionTypeList"
                            v-model="selectedOptions"
                            :props="props"
                            @change="handleChangeQuestion">
                    </el-cascader>
                </div>
                <div class="whiteSpace mb30">
                    <span>问题内容：</span>
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="questionParams.questionContent"
                            style="width: 200px"
                    >
                    </el-input>
                </div>
                <div class="whiteSpace mb30">
                    <span>回答者：</span>
                    <el-select filterable v-model="answerUserType" :multiple="true" placeholder="请选择">
                        <el-option
                                v-for="item in answerList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="whiteSpace mb30">
                    <span>可见范围：</span>
                    <el-select filterable v-model="seeScope" multiple placeholder="请选择">
                        <el-option
                                v-for="item in answerList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div style="text-align: center">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleClickCommitQuestion" style="background: #ED7018;border-color: #ED7018">提 交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { parseUrlParams } from "../../util";
    import CONSTANT from '../../constant/constant.js'
    import common from '../../common.js'
    let stepLen;
    export default {
        data() {
            return {
                diligenceTime: "",
                expiredTime: "",
                addressParams: {
                    address: "",
                    province: "",
                    city: "",
                    district: "",
                },
                onlyStepKey: "",
                isToggle: false,
                show: false,
                // show: true,
                answerUserType: [],
                seeScope: [],
                uploadUrl: "",
                fileList: [],
                lastStepKey: "",
                lastStepName: "",
                active: null,
                // active: 3,
                stepKey: "",
                stepName: "",
                nextStepKey: "",
                nextStepName: "",
                detail: {
                    masterOrder: {
                        productData: {},
                        coreData: {}
                    }
                },
                stepList: [],
                dialogDispatchVisible: false,
                dialogVisible: false,
                dialogStatusVisible: false,
                questionTypeList: [],
                selectedOptions: [],
                props: {
                    label: "value",
                    value: 'key',
                    children: 'childs'
                },
                questionParams: {
                    questionType: null,
                    questionSubType: null,
                    questionContent: '',
                    answerUserType: "",
                    seeScope: "",
                    orderId: "",
                    stepKey: ""
                },
                commitAnswerParams: [{
                    answer: "",
                    answerUserType: "",
                    orderId: "",
                    questionId: "",
                    stepKey: "",
                }],
                answerList: [
                    {
                        value: "company",
                        label: "融资企业",
                    },
                    {
                        value: "bank",
                        label: "资金方",
                    }
                ],
                commentStatusParams: {
                    stepKey: "",
                    status: "",
                    memo:""
                },
                radio: {},
                index: "",
                items: [],
                itemsParams: {

                },
                showSubRadio1: false,
                showSubRadio2: false,
                itemsStock: [],
                itemsStockParams: {},
                stockParams: {
                    hasStock: ""
                },
                bankList: [],
                roleList: [],
                dispatchParams: {
                    bankId: "",
                    bankServiceManager: "",
                    masterOrderId: "",
                    stepKey: "",
                    subBankId: ""
                },
                propsBank: {
                    label: "bankName",
                    value: 'userId',
                    children: 'subBankDatas'
                },
                selectedBankOptions: [],
                id: "",
                num: 0,
                messageList: [],
                area: []
            }
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.uploadUrl = CONSTANT.URL.SYS.ADMINUPLOAD + "?sessionId="+common.getCookie("sessionId");
            this.getOrderStepList( () => {
                this.getDetail("", () => {
                    this.onlyStepKey = this.detail.stepKey
                }, true)
            });
        },
        updated() {
            let steps = document.querySelectorAll(
            ".el-step__head.is-process,.el-step__head.is-success"
            );
            const len = steps.length;
            if (stepLen == len) return;
            stepLen = len;
            steps = Array.from(steps);
            steps.forEach((step, index) => {
                step.addEventListener("click", e => {
                    const active = document.querySelector(".el-step__head.active");
                    active && active.classList.remove("active");
                    step.classList.add("active");
                    const { stepKey } = this.stepList[index];
                    this.getDetail(this.stepList[index].stepKey, () => {})
                    if(this.onlyStepKey == this.stepList[index].stepKey) {
                        this.isToggle = false
                    } else {
                        this.isToggle = true
                    }
                });
            });
            steps[len - 1] && steps[len - 1].classList.add("active");
        },
        components: {
            'table-list':() => import('../common/my-table')
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getDetail(params, callback=null , first = false) {
                let url = CONSTANT.URL.ORDER.DISPATCHORDERDETAIL;
                common.requestAjax(url, JSON.stringify({orderId: parseUrlParams("orderId"), stepKey: params}), {}, (data) => {
                    this.detail = data.data.bussData;
                    callback && callback()
                    this.items = [];
                    this.itemsStock = []
                    if(this.detail.questionDatas) {
                        this.detail.questionDatas.map( (item, index) => {
                            this.commitAnswerParams.push({
                                answer: "",
                                answerUserType: "",
                                orderId: "",
                                questionId: "",
                                stepKey: "",
                            })
                        })
                    }

                    this.stepList.map( (item, index) => {
                        if(item.stepKey == this.detail.lastStepKey) {
                            if (first) {
                                this.active = index
                            }
                            this.lastStepName = item.stepName
                            this.stepKey = item.stepKey;
                            this.stepName = item.stepName;
                        }
                        if(item.stepKey == this.detail.stepKey) {
                            if (first) {
                                this.active = index
                            }
                            this.stepKey = this.detail.stepKey
                            this.stepName = item.stepName
                            this.nextStepKey = this.stepList[index+1] ? this.stepList[index+1].stepKey : ""
                            this.nextStepName = this.stepList[index+1] ? this.stepList[index+1].stepName : ""
                        }

                        if (this.detail.stepKey == "step_close") {
                            if (this.detail.lastStepKey == item.stepKey) {
                                this.stepKey = this.detail.lastStepKey;
                                this.stepName = item.stepName
                                this.active = index
                            }

                        }

                        if (this.detail.stepKey == "step_reject") {
                            if (this.detail.lastStepKey == item.stepKey) {
                                this.stepKey = this.detail.lastStepKey;
                                this.stepName = item.stepName
                                this.active = index
                            }

                        }
                    })

                    this.detail.masterOrder.productData.areaDatas.map( (item, index) => {
                        let itemArea = "";
                        if (item.financingProvinceName) {
                            itemArea = item.financingProvinceName
                        }
                        if (item.financingCityName) {
                            itemArea = item.financingProvinceName+item.financingCityName
                        }
                        if (item.financingDistrictName) {
                            itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                        }
                        this.area.push(itemArea)
                    })

                    this.getCommentRadiosList()
                })
            },
            getOrderStepList(callback) {
                let url = CONSTANT.URL.ORDER.ORDERSTEPLIST;
                common.requestAjax(url, {}, {}, (data) => {
                    this.stepList = data.data.bussData
                    callback && callback();
                })
            },
            getCommentRadiosList() {
                let url = CONSTANT.URL.ORDER.RADIOS;
                common.requestAjax(url, JSON.stringify({orderId: parseUrlParams("orderId"), stepKey: this.detail.stepKey}), {}, (data) => {
                    this.radio = data.data.bussData
                })
            },
            getRoleUserList() {
                let url = CONSTANT.URL.ROLEUSER.ROLE;
                common.requestAjax(url, JSON.stringify({}), {roleKey: "market_manager"}, (data) => {
                    if(data.status == 200) {
                        this.roleList = data.data.bussData;
                    }
                })
            },
            getBankUserList() {
                let url = CONSTANT.URL.COMPANY.BANKUSERTREE;
                common.requestAjax(url, {}, {}, (data) => {
                    this.bankList = data.data.bussData;
                })
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            getUserType(params, secondParams, callback) {
                let url = CONSTANT.URL.COMPANY.USERTYPE;
                common.requestAjax(url, JSON.stringify({userType: params, capitalType: secondParams}), {}, callback)
            },
            handleChange(file, fileList) {
            },
            handleSuccessFile(res, file, fileList) {
                let url = CONSTANT.URL.ORDER.DISPATCHORDERSAVEANSWER;
                let params = Object.assign(res, {attachmentId: file.data.bussData.fileId})
                common.requestAjax(url, JSON.stringify(params), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getDetail("", () => {})
                    }
                })
            },
            handleClickAddQuestion() {
                this.getDictionary("first_file_type ", (data) => {
                    this.questionTypeList = data.data.bussData;
                })
                this.id = ""
                this.answerUserType = []
                this.seeScope = []
                this.questionParams = {
                    questionType: null,
                    questionSubType: null,
                    questionContent: '',
                    answerUserType: [],
                    seeScope: [],
                    orderId: "",
                    stepKey: ""
                }
                this.dialogVisible = true
            },
            handleChangeQuestion(val) {
                val.map( (item, index) => {
                    if (index == 0) {
                        this.questionParams.questionType = item
                    }
                    if (index == 1) {
                        this.questionParams.questionSubType = item
                    }
                })
            },
            handleClickCommitQuestion() {
                this.questionParams.answerUserType = this.answerUserType.join(",")
                this.questionParams.seeScope = this.seeScope.join(",");
                let url = CONSTANT.URL.ORDER.DISPATCHORDERSAVEQUESTION;
                let paramId = {}
                if (this.id) {
                    paramId = {
                        id: this.id
                    }
                }
                common.requestAjax(url, JSON.stringify(Object.assign(this.questionParams, paramId, {orderId: parseUrlParams("orderId"), stepKey: this.detail.stepKey})), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.questionParams = {
                            questionType: null,
                            questionSubType: null,
                            questionContent: '',
                            answerUserType: [],
                            seeScope: [],
                            orderId: "",
                            stepKey: ""
                        }
                        this.answerUserType = []
                        this.seeScope = []
                        this.getDetail("", () => {})
                        this.dialogVisible = false
                    }
                })
            },
            handleClickEditQuestion(item) {
                this.getDictionary("first_file_type ", (data) => {
                    this.questionTypeList = data.data.bussData;
                })
                this.id = item.id;
                this.dialogVisible = true;
                this.answerUserType = item.answerUserType.split(",")
                this.selectedOptions = [item.questionType, item.questionSubType]
                this.seeScope = item.seeScope.split(",")
                this.questionParams = {
                    questionType: item.questionType,
                    questionSubType: item.questionSubType,
                    questionContent: item.questionContent,
                    answerUserType: item.answerUserType,
                    seeScope: item.seeScope,
                    orderId: item.orderId,
                    stepKey: item.stepKey
                }
            },
            handleClickDelete(item) {
                this.$confirm('将删除该条问题及相关附件和回复?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    let url = CONSTANT.URL.ORDER.DELETEDISPATCH;
                    common.requestAjax(url, {}, {questionId: item.id}, (data) => {
                        if (data.status == 200) {
                            this.$message({
                                message: data.msg,
                                type: "success"
                            })
                            this.getDetail("", () => {})
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClickCommitAnswer(index, id, stepKey, answerUserType) {
                let params = Object.assign(this.commitAnswerParams[index], {
                    orderId: parseUrlParams("orderId"),
                    stepKey: stepKey,
                    answerUserType: answerUserType,
                    questionId: id
                })
                let url = CONSTANT.URL.ORDER.DISPATCHORDERSAVEANSWER;
                common.requestAjax(url, JSON.stringify(params), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getDetail("", () => {})
                    }
                })
            },
            handleChangeRadio(val) {
                this.radio.stepList.map( (item, index) => {
                    if (item.key == val && item.items) {
                        this.items = item.items;
                        this.showSubRadio1 = true
                        item.items.map( item1 => {
                            this.itemsParams = Object.assign(this.itemsParams, {[item1.key]: ""})
                        })
                    } else if (item.key == val && !item.items) {
                        this.showSubRadio1 = false
                    }
                })
            },
            handleChangeStockRadio(val) {
                this.radio.stockList.map( (item, index) => {
                    if (item.key == val && item.items) {
                        this.itemsStock = item.items;
                        this.showSubRadio2 = true
                        item.items.map( item1 => {
                            this.itemsStockParams = Object.assign(this.itemsStockParams, {[item1.key]: ""})
                        })
                    } else if (item.key == val && !item.items) {
                        this.showSubRadio2 = false
                    }
                })
            },
            handleClickCommitCommentStatus() {

                let url = CONSTANT.URL.ORDER.DISPATCHORDERCOMMENT;
                if(this.stockParams.hasStock) {
                    let split = this.stockParams.hasStock.split("");
                    this.stockParams.hasStock = split[split.length-1]
                }

                if (this.showSubRadio1 && this.stepKey == "option_agreement_signed") {
                    if (!this.itemsParams.diligenceTime) {
                        this.$message({
                            message: "请选择开户时间",
                            type: "warning"
                        })
                        return false
                    }
                    if (!this.itemsParams.diligenceAddress) {
                        this.$message({
                            message: "请输入详细开户地点",
                            type: "warning"
                        })
                        return false
                    }
                }

                if (this.showSubRadio2 && this.stepKey == "option_agreement_signed") {
                    if (!this.itemsStockParams.stockNums) {
                        this.$message({
                            message: "请输入期权数量",
                            type: "warning"
                        })
                        return false
                    }
                    if (!this.itemsStockParams.expiredTime) {
                        this.$message({
                            message: "请选择过期时间",
                            type: "warning"
                        })
                        return false
                    }
                }

                if (this.showSubRadio1 && this.stepKey == "in_the_loan") {
                    if (!this.itemsParams.totalLoan) {
                        this.$message({
                            message: "请输入放款总额",
                            type: "warning"
                        })
                        return false
                    }
                    if (!this.itemsParams.loanNums) {
                        this.$message({
                            message: "请输入总还款期数",
                            type: "warning"
                        })
                        return false
                    }
                    if (!this.itemsParams.loanAmount) {
                        this.$message({
                            message: "请输入每期还款额",
                            type: "warning"
                        })
                        return false
                    }
                    if (!this.itemsParams.loanDay) {
                        this.$message({
                            message: "请输入每月还款日期",
                            type: "warning"
                        })
                        return false
                    }
                }

                if (!this.commentStatusParams.status) {
                    this.$message({
                        message: "请选择状态",
                        type: "warning"
                    })
                    return false
                }

                let params = Object.assign(this.commentStatusParams, this.itemsParams, this.itemsStockParams, this.stockParams,  {stepKey:  this.detail.stepKey, orderId: parseUrlParams("orderId")})
                common.requestAjax(url, JSON.stringify(params), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getDetail("", () => {
                            this.onlyStepKey = this.detail.stepKey
                        })
                        this.commentStatusParams = {
                            stepKey: "",
                            status: "",
                            memo:"",
                        }
                        this.itemsParams = {};
                        this.addressParams = {
                            address: "",
                            province: "",
                            city: "",
                            district: "",
                        }
                        this.showSubRadio1 = false;
                        this.showSubRadio2 = false;
                        this.diligenceTime = "";
                        this.expiredTime = "";
                        location.reload();
                    }
                })
            },
            handleClickAddDispatch() {
                this.dialogDispatchVisible = true;
                this.getBankUserList()
                this.getRoleUserList()
            },
            handleChangeBankTree(val) {
                this.dispatchParams.bankId = val[0]
                this.dispatchParams.subBankId = val[1]
            },
            handleCommitDispatch() {
                let url = CONSTANT.URL.ORDER.DISPATCHUSERORDER;
                let params = Object.assign(this.dispatchParams, {masterOrderId: parseUrlParams("orderId"), stepKey: this.detail.stepKey});
                common.requestAjax(url, JSON.stringify(params), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.dialogDispatchVisible = false
                    }
                })
            },
            handleClickAttachment(answerId, orderId) {
                let url = CONSTANT.URL.ORDER.ATTACHMENT;
                common.requestAjax(url, JSON.stringify({answerId: answerId, orderId: orderId}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                    }
                })
            },
            handleClickSearch() {

            },
            handleClickConsult() {

            },
            handleClickWith(id) {
                location.href = "/check/availableOrderDetail?orderId="+id
            },
            handleClickDown() {
                this.show = true
            },
            handleClickTop() {
                this.show = false
            },
            handleClickHead() {
                if (this.show) {
                    this.show = false
                } else {
                    this.show = true
                }
            },
            handleChangeDate(val) {
            },
            selectProvince(val) {
                this.addressParams.province = val.value
            },
            selectCity(val) {
                this.addressParams.city = val.value
            },
            selectArea(val) {
                this.addressParams.district = val.value
            },
            handleChangeAddress(val) {
                this.itemsParams.diligenceAddress =  this.addressParams.province + this.addressParams.city + this.addressParams.district + val
            },
            handleChangeItemsDate(res) {
                this.itemsParams.diligenceTime = this.diligenceTime
            },
            handleChangeItemsStockDate(res) {
                this.itemsStockParams.expiredTime = this.expiredTime
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .el-step__head.active::after {
            content: "";
            position: absolute;
            left: 50%;
            margin-left: -8px;
            top: 32px;
            width: 0;
            height: 0;
            border: 8px solid #999999;
            border-radius: 2px;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotateZ(-135deg);
        }
        .distpicker-address-wrapper {
            select {
                width: 80px;
            }
        }
        .mb30 {
            margin-bottom: 30px;
        }
        .mb18 {
            margin-bottom: 18px;
        }
        .whiteSpace {
            white-space: nowrap;
        }
        .dispatch-order-detail {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }

            .detail-content {
                padding: 31px 31px;
                background-color: #fff;
                .info-wrap {
                    background-color: #fff;
                    padding: 0 0 29px 0;
                    border-bottom: 1px solid #d1d1d1;
                    overflow: hidden;
                    .info-title {
                        width: 35%;
                        font-size: 14px;
                        color: #333;
                        font-weight: bold;
                    }
                    .infos-list {
                        overflow: hidden;
                    }
                    .info-list {
                        width: 100%;
                        float: left;
                        font-size: 14px;
                        color: #666;
                        span.name {
                            color: #ed7018;
                        }
                        .info {
                            overflow: hidden;
                            margin-top: 25px;
                            .info-item {
                                width: 33.33%;
                                float: left;
                                &:nth-child(2) {
                                    float: left;
                                }
                                &:last-child {
                                    /*float: right;*/
                                }
                            }
                            span {
                                color: #111;
                                // font-weight: bold;
                            }
                            .name {
                                color: #ed7018;
                            }
                        }
                    }
                }
                .head {
                    position: relative;
                    padding-bottom: 26px;
                    border-bottom: 1px solid #e1e1e1;
                    .left-sec {
                        div {
                            margin-right: 10px;
                        }
                    }
                    .arrow-down {
                        cursor: pointer;
                        background: url(../../images/arrow-down.png) 0 0 no-repeat;
                        -webkit-background-size: cover;
                        background-size: cover;
                    }
                    .arrow-top{
                        cursor: pointer;
                        background: url(../../images/arrow-top.png) 0 0 no-repeat;
                        -webkit-background-size: cover;
                        background-size: cover;
                    }
                }
                .step-wrap {
                    margin-left: -30px;
                    margin-right: -30px;
                    .el-step__title{
                        font-size: 13px!important;
                    }
                    .el-steps {
                        .el-step:nth-child(1) {
                          .el-step__main{
                            margin-left: 30px;
                          }
                        }
                        .el-step:nth-last-child(1) {
                            .el-step__main {
                                margin-right: 30px;
                            }
                        }
                    }
                }
                /*
                .step-wrap{
                    padding-top: 27px;
                    background-color: #fff;
                    .el-steps--horizontal{
                        margin: 0px auto 0;
                        .el-step {
                            cursor: pointer;
                        }
                        .el-step__title {
                            font-size: 14px!important;
                            white-space: nowrap;
                        }
                        .is-success{
                            .el-step__icon.is-text{
                                color: #E1E1E1;
                                background-color: #ED7018;
                                border: 1px solid #ED7018;
                                .el-step__icon-inner{
                                    color: #fff;
                                }
                            }
                        }
                        .el-step__head.is-success{
                            .el-step__line{
                                background-color: #ED7018;
                            }
                        }
                        .el-step__title.is-process{
                            color: #ED7018;
                        }
                        .is-process{
                            .el-step__icon.is-text{
                                color: #E1E1E1;
                                background-color: #ED7018;
                                border: 1px solid #ED7018;
                                .el-step__icon-inner{
                                    color: #fff;
                                }
                            }
                        }
                        .el-step__title.is-wait{
                            color: #999;
                        }
                        .el-step__icon.is-text{
                            color: #E1E1E1;
                            background-color: #E1E1E1;
                            border: 1px solid #E1E1E1;
                            .el-step__icon-inner{
                                color: #fff;
                            }
                        }
                    }
                }
                */
                .question-list {
                    margin-top: 20px;
                    .question-item {
                        padding: 20px;
                        background-color: #f8f8f8;
                        margin-bottom: 20px;
                        .el-upload-list.el-upload-list--text {
                            display: none;
                        }
                        .file-list-section {
                            border-bottom: 1px solid #d1d1d1;
                            padding-bottom: 20px;
                            ul {
                                li {
                                    margin-bottom: 10px;
                                    &:last-child {
                                        margin-bottom: 0;
                                    }
                                    span {
                                        margin-right: 20px;
                                    }
                                    a {
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
                    .answer-list {
                        li {
                            margin-bottom: 20px;
                            border-bottom: 1px solid #d1d1d1;
                            padding-bottom: 20px;
                        }
                    }
                }
                .status-change-modal {
                    color: #666;
                    .el-textarea {
                        width: 80%;
                        /*float: right;*/
                    }
                    .el-radio__input.is-checked .el-radio__inner {
                        border-color: #ED7018;
                        background: #ED7018;
                    }
                    .el-radio__input.is-checked+.el-radio__label {
                        color: #333;
                    }
                    .el-popover.el-popper {
                        display: block!important;
                    }
                    .radio-child {
                        /*width: 600px;*/
                    }
                }
            }
        }
    }
</style>
